<template>
  <!-- 选择品牌 -->
  <a-modal v-model:visible="showBrandDialog" title="关联品牌" title-align="start" :on-before-ok="submitData" @cancel="closedDialog">
    <div style="min-height: 120px">
      <div class="flex-c">
        <p style="width: 120px; text-align: right; margin-right: 20px">
          <span class="warningColor">*</span>
          <span>选择品牌</span>
        </p>
        <a-select v-model="brands" allow-clear multiple value-key="code" style="width: 300px">
          <a-option v-for="(item, index) in brandList" :key="index" :value="item">{{ item.name }}</a-option>
        </a-select>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { updateShopBase } from '@/api/system'
  import { getBrandList } from '@/api/product'
  export default defineComponent({
    name: 'ChooseBrand',
    props: {
      isShow: {
        type: Boolean,
        default: false,
      },
      idList: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['closed', 'success'],
    setup(props, { emit }) {
      const showBrandDialog = ref(props.isShow)
      const brands = ref<any>([])
      const brandList = ref<Array<any>>([]) //品牌列表
      // 获取品牌列表
      async function getbrandList() {
        const res: any = await getBrandList({
          pageNum: 1,
          pageSize: 1000,
        })
        brandList.value = res?.data?.records || []
      }
      getbrandList()
      // 关闭弹窗
      function closedDialog() {
        brands.value = null
        emit('closed')
      }
      // 选择品牌
      async function submitData() {
        if (!brands.value?.length) {
          Message.error('请选择品牌')
          return false
        }
        let shopBrandParams = brands.value.map((el: any) => {
          return {
            brandCode: el.code,
            brandName: el.name,
            brandId: el.id,
          }
        })
        const res: any = await updateShopBase({
          idList: props.idList,
          shopBrandParams: shopBrandParams,
        })
        if (!res) return false
        emit('success')
        closedDialog()
        Message.success('关联品牌成功')
        return true
      }
      return {
        showBrandDialog,
        closedDialog,
        submitData,
        brandList,
        brands,
      }
    },
  })
</script>
